<template>
  <div id="mixCharts" ref="mixCharts" style="height: 500px; width: 100%"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: {},
  data() {
    return {
      myCharts: null,
    }
  },
  watch: {},
  mounted() {
    this.arrX = ['安徽', '上海', '河南', '湖北', '江西', '浙江', '江苏', '山东']
    this.arrY1 = ['100', '222', '333', '74', '590', '406', '207', '408']
    this.arrY2 = ['1002', '1222', '1333', '174', '1590', '46', '27', '48']
    this.arrY3 = ['-10', '10', '13', '-59', '150', '4', '2', '48']
    this.init();
    window.addEventListener("resize", this.resize);
  },
  methods: {
    init() {
      var chartDom = document.getElementById('mixCharts');
      this.myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow", // 鼠标移入后的阴影
          },
        },
        title: {
          text: '客服中心系统业务量对比',
          left: 'center'
        },
        legend: {
          data: ["总车流量", "客车", '货车'],
          top: 'bottom',
          textStyle: {
            color: "#000",
          },
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "10%",
          top: '15%',
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: true, // 当图标超出X轴到负半轴时设置为true可解决
          data: this.arrX,
          axisLabel: {
            textStyle: {
              fontWeight: "bolder",
              color: "#000",
            },
          },
        },
        yAxis: [{
          type: "value",
          name: "单位:辆次",
          nameTextStyle: { // 单位的样式和位置
            color: "#000",
            fontSize: 12,
            padding: [15, 25, 22, 0],
          },
          splitLine: {
            show: true,
            lineStyle: { // 与X轴平行的线的样式
              type: "dashed",
              color: "rgba(0,0,0,0.3)",
            },
          },
          axisLabel: { // Y轴刻度的样式
            formatter: '{value}',
            textStyle: {
              fontWeight: "bolder",
              color: "#000",
            },
          },
        },
        {
          type: 'value',
          name: '百分比',
          axisLabel: {
            formatter: '{value} %'
          },
          splitLine: {
            show: false,
          },
        }
        ],

        series: [
          {
            name: "总车流量",
            type: "bar",
            barGap: '0%', // 一个坐标下的柱子紧挨着没间隙
            emphasis: {
              focus: "series", // 鼠标移入其他柱子消失
            },
            itemStyle: {
              borderRadius: [2, 2, 0, 0], //柱体圆角
            },
            label: {
              show: true,
              position: 'top',
              formatter: function (data) {
                return data.value + '辆次'
              }
            },
            data: this.arrY1
          },
          {
            name: "客车",
            type: "bar",
            emphasis: {
              focus: "series", // 鼠标移入其他柱子消失
            },
            // stack: "Total",
            itemStyle: {
            },
            label: {
              show: true,
              position: 'top',
              formatter: function (data) {
                return data.value + '辆次'
              }
            },
            data: this.arrY2,
          },
          {
            name: "货车",
            type: "line",
            yAxisIndex: 1, // k开启双y轴
            emphasis: {
              focus: "series", // 鼠标移入其他柱子消失
            },
            // symbol: 'none', //这句就是去掉点的
            smooth: true, //这句就是让曲线变平滑的
            data: this.arrY3,
            itemStyle: {
            },
            label: {
              show: true,
              position: 'top',
              formatter: function (data) {
                return data.value + '%'
              }
            },
          },
        ],
      }
      option && this.myChart.setOption(option);
    },
    // 页面缩放
    resize() {
      this.myChart.resize();
    },
  },
  beforeDestroy() {
    if(!this.myChart){
      return
    }
    window.removeEventListener("resize", this.resize);
    this.myChart.dispose()
  },
}
</script>

<style lang="scss" scoped></style>